<template>
  <div class="login-card">
    <div class="login-welcome">
      <div class="login-title">
        欢迎使用
        <span class="login-bold-title">纸屋学术</span>
      </div>
    </div>
    <div class="login-warp">
      <div class="form-warp">
        <n-form :model="modelRef" ref="formRef" :rules="rules">
          <div class="login-form-input">
            <n-form-item path="acc" label="账号">
              <n-input
                outlined
                dense
                color="#6777EF"
                background-color="#FDFDFF"
                placeholder="邮箱"
                v-model:value="modelRef.acc"
              ></n-input>
            </n-form-item>
          </div>
          <div>
            <n-form-item path="pwd" label="密码">
              <n-input
                color="#6777EF"
                background-color="#FDFDFF"
                placeholder="密码"
                v-model:value="modelRef.pwd"
                type="password"
                show-password-on="mousedown"
                @keyup.enter.native="login"
              ></n-input>
            </n-form-item>
          </div>
          <div class="forget-link">
            <a href="forget">忘记密码?</a>
          </div>
          <div>
            <n-button
              elevation="2"
              min-width="130"
              color="#333333"
              class="login-btn"
              @click="login"
            >登录</n-button>
          </div>
          <div class="register-link">
            还没有账号?👉
            <a href="register">注册</a>
          </div>
        </n-form>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { userinfo } from '@/utils/userinfo'
import { getCurrentInstance, ref } from "vue";
import { useMessage } from 'naive-ui'
import { useRouter } from "vue-router";

//用于Message弹框
const message = useMessage()

// api访问代理
const { proxy } = getCurrentInstance() as any

// 引入路由
const router = useRouter()

const formRef = ref(null)

const modelRef = ref({
  acc: null,
  pwd: null,
})

const rules = {
  acc: [
    {
      required: true,
      validator(rule: any, value: any) {
        if (!value) {
          return new Error('请输入账号(邮箱)')
        } else if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
          return new Error('请输入邮箱')
        }
        return true
      },
      trigger: ['input', 'blur']
    }
  ],
  pwd: [
    {
      required: true,
      validator(rule: any, value: any) {
        if (!value) {
          return new Error('请输入密码')
        } else if (!/^(\w){6,20}$/.test(value)) {
          return new Error('密码应为6~20位')
        }
        return true
      },
      trigger: ['input', 'blur']
    }
  ],
}

const login = (() => {
  if (modelRef.value.acc == null || modelRef.value.acc == "") {
    message.warning("请输入账号(邮箱)");
  }
  else if (modelRef.value.pwd == null || modelRef.value.pwd == "") {
    message.warning("请输入密码");
  }
  else if (!/^(\w){6,20}$/.test(modelRef.value.pwd)) {
    message.warning("密码应为6~20位，只包含字母、数字或下划线")
  }
  else if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(modelRef.value.acc)) {
    message.warning("账号:请输入邮箱")
  }
  else {
    proxy.$api.entry.login({ acc: modelRef.value.acc, pwd: modelRef.value.pwd }).then((result: any) => {
      if (result.success) {
        message.success("登录成功")
        userinfo.user_name = result.name
        userinfo.avatar = result.avatar
        userinfo.is_login = true
        router.replace({ name: 'Home' })
      } else {
        message.error(result.msg)
      }
    }).catch(() => {
      message.error('未知错误')
    });
  }
})

</script>
<style scoped>
.login-card {
  border-top: 3px solid #666;
  margin: 6% auto;
  width: 800px;
  border-radius: 5px;
  box-shadow: 0 8px 6px hsl(0deg 0% 78% / 50%);
  min-height: 480px;
}
.login-warp {
  margin: 5% auto;
  width: 50%;
  margin-top: 6%;
}

.login-logo {
  margin-bottom: 10%;
  box-shadow: 0 2px 6px #e6ecf1;
}

.login-welcome {
  border-left: 5px solid #666;
  margin-left: 24.7%;
  margin-top: 5%;
}
.login-title {
  margin-left: 10px;
  font-size: 25px;
}

.login-bold-title {
  font-weight: bold;
}

.form-warp {
  margin-top: 10%;
}

.login-form-input {
  margin-top: 10px;
  margin-bottom: 20px;
}

.login-btn {
  color: white;
  margin: 5% auto;
  margin-left: 86.3%;
}

.forget-link {
  margin-left: 85%;
  font-size: 13px;
  text-align: center;
}

.register-link {
  margin-top: 0%;
  margin-bottom: 5%;
  text-align: center;
  font-size: 13px;
  width: 100%;
}

a {
  color: #157aff;
  text-decoration: none;
}
</style>